html {
    font-size: 16px;
}

* {
    margin: 0;
    padding: 0;
}

.root {
    width: 23.44rem;
    height: 41.69rem;
    /* background-color: rgb(195, 76, 76); */
    background-image: url("../创家盛典/img/bg.jpg");
    overflow: hidden;
    background-size: 23.44rem 41.69rem;
    position: relative;
}

.bottom img {
    width: 1.69rem;
    height: 0.56rem;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 2rem;
    /* opacity: 1; */
    /* z-index: 3; */
}

.root div {
    position: absolute;
}

.q1 img,
.q1 {
    width: 12.06rem;
    height: 10.31rem;
    top: 3.5rem;
    left: 11.22rem;
}

.q2,
.q2 img {
    width: 11.47rem;
    height: 8.72rem;
    top: 10.7rem;
    left: 1rem;
}

.q3,
.q3 img {
    width: 11.78rem;
    height: 8.03rem;
    top: 19.33rem;
    left: 11rem;
}

.q4,
.q4 img {
    width: 10rem;
    height: 8.75rem;
    left: 1.2rem;
    top: 22.03rem;
}

.q5,
.q5 img {
    width: 10.25rem;
    height: 7.56rem;
    left: 12rem;
    top: 30rem;
}

#q6,
#q7,
#q8 {
    position: absolute;
    width: 4rem;
}

#q6 {
    top: 4rem;
    left: 2rem;
}

#q7 {
    top: 15rem;
    left: 19rem;
}

#q8 {
    top: 34rem;
    left: 3rem;
}